<template>
  <div class="info_wrapper">
    <account-info-header :headTitle="headTitle"></account-info-header>
    <ul class="main">
      <li class="head_portrait">
        <b>头像</b>
        <span class="upload_pic">
          <input type="file" accept="image/jpeg,image/jpg,image/png" class="upload" @change="uploadAvatar">
          <div class="pic" v-if="userInfo"><span><img :src="imgBaseUrl + userInfo.avatar" /></span></div>
          <div class="pic default" v-else><span><img src="@/assets/images/face.png" /></span></div>
          <span class="iconfont arrow">&#xe63c;</span>
        </span>
      </li>
      <router-link to='/profile/info/username' class="link">
        <li class="main">
          <b>用户名</b>
          <span class="text">
            {{userName}}
            <span class="iconfont arrow">&#xe63c;</span>
          </span>
        </li>
      </router-link>
    </ul>
    <h2 class="title">账号绑定</h2>
    <ul class="main">
      <li>
        <span class="mobile">
          <i class="iconfont">&#xe730;</i>
          <b>手机</b>
        </span>
        <span class="text">
          137****2323
          <span class="iconfont arrow">&#xe63c;</span>
        </span>
      </li>
    </ul>
    <h2 class="title">安全设置</h2>
    <ul class="main">
      <router-link to='/profile/info/modifyPassword' class="link">
        <li>
          <b>登录密码</b>
          <span class="text">
            <span class="blue">修改</span>
            <span class="iconfont arrow">&#xe63c;</span>
          </span>
        </li>
      </router-link>
    </ul>
    <button type="button" class="log_out" @click="logOut">退出登录</button>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapState, mapMutations } from 'vuex'
import { removeStore } from '@/assets/js/mUtils'
import AccountInfoHeader from '@/components/header/Header'
export default {
  name: 'AccountInfo',
  data () {
    return {
      headTitle: '账户信息',
      userName: '', // 用户名
      resetName: '', // 重置用户名
      mobile: '', // 用户手机
      avatar: '', // 用户头像
      isLogIn: true, // 是否登录
      isLogOut: false, // 是否退出
      imgBaseUrl: 'https://elm.cangdu.org/img/'
    }
  },
  components: {
    AccountInfoHeader
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['OUT_LOGIN']),
    // 退出登录
    logOut () {
      Dialog.confirm({
        width: '70%',
        title: '是否退出登录',
        confirmButtonText: '确认退出',
        cancelButtonText: '再等等'
      })
        .then(() => {
          this.OUT_LOGIN()
          this.$router.go(-1)
          removeStore('user_id')
          this.$api.home.signout()
        })
        .catch(() => {
        })
    },
    // 上传头像
    uploadAvatar () {
      if (this.userInfo) {
        let input = document.querySelector('.upload')
        let uploadData = new FormData()
        uploadData.append('file', input.files[0])
        try {
          fetch('https://elm.cangdu.org/eus/v1/users/' + this.userInfo.user_id + '/avatar', {
            method: 'POST',
            credentials: 'include',
            body: uploadData
          }).then(res => res.json())
            .then(data => {
              if (data.status === 1) {
                this.userInfo.avatar = data.image_path
              }
            })
        } catch (error) {
          Dialog.alert({
            width: '70%',
            title: '上传失败'
          }).then(() => {
            throw new Error(error)
          })
        }
      }
    }
  },
  watch: {
    userInfo (value) {
      if (value && value.user_id) {
        this.userName = value.username
        this.mobile = value.mobile
        this.avatar = value.avatar
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .info_wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: #f2f2f2
    z-index: 100
    padding-top .88rem
    .main
      background-color: #fff
      width: 100%
      font-size: .32rem
      color: #333
      li
        position: relative
        padding: .28rem
        cursor: pointer
        display: flex
        justify-content: space-between
        align-items: center
        box-sizing: border-box
        &:last-child
          border-top: .01rem solid #f9f9f9
        b
          font-weight: bold
        .mobile
          display: flex
          align-items: bottom
          .iconfont
            font-size: .42rem
            color: #0097ff
        .upload_pic, .text
          color: #666
          display: flex
          align-items: center
          input
            display: block
            position: absolute
            opacity: 0
            top: 0
            left: 0
            width: 100%
            height: 100%
          .pic
            width: 1.2rem
            height: 1.2rem
            overflow: hidden
            border-radius: 50%
          .blue
            color: #0097ff
          .arrow
            color: #ddd
            width: .28rem
            height: .28rem
            line-height: .28rem
            margin-left: .1rem
    h2.title
      margin: .32rem 0 .14rem .28rem
      font-size: .24rem
      color: #999
    .log_out
      display: block
      width: 100%
      text-align: center
      padding: .28rem 0
      margin: .4rem 0
      color: #ff5339
      border-radius: .08rem
      font-size: .32rem
      font-weight: 700
      background-color: #fff
    .router-slid-enter-active, .router-slid-leave-active
        transition: all .4s
    .router-slid-enter, .router-slid-leave-active
        transform: translate3d(2rem, 0, 0)
        opacity: 0
</style>
